<!--
 * @Author: your name
 * @Date: 2021-09-02 08:51:57
 * @LastEditTime: 2021-09-04 09:11:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \经纪人\broker-page\app\src\component\qiu.vue
-->
<!--  -->
<template>
  <div class="qiu">
    <van-dropdown-menu>
      <van-dropdown-item
        @click="wyh(option1[value1])"
        title="房产类型"
        v-model="value1"
        :options="option1"
      />
      <van-dropdown-item title="区域选择" v-model="value2" :options="option2" />
    </van-dropdown-menu>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  setup() {
    const value1 = ref(0);
    const value2 = ref("a");
    const option1 = [
      { text: "多层住宅", value: 0 },
      { text: "高层住宅", value: 1 },
      { text: "小高层住宅", value: 2 },
      { text: "商铺/门面房", value: 3 },
      { text: "厂房", value: 4 },
      { text: "写字楼", value: 5 },
      { text: "独院", value: 6 },
      { text: "车库", value: 7 },
    ];
    const option2 = [
      { text: "区域选择", value: "a" },
      { text: "好评排序", value: "b" },
      { text: "销量排序", value: "c" },
    ];

    return {
      value1,
      value2,
      option1,
      option2,
    };
  },
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    wyh(aa) {
      console.log(aa);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
.van-dropdown-menu {
  border-bottom: 1px solid #ccc;
}
</style>
